<template>
  <div class="container">
    <ActionBar
      @input-change="handleInputChange"
      @search-click="getPermissionList"
      @insert-click="handleInsertClick"
      @edit-click="handleEditClick"
      @delete-click="handleDeleteClick"
    />
    <Table :tableData="permissionList" :loading="tableLoading" @selection-change="selectionChange" />
    <Diglog
      :title="title"
      :show.sync="dialogVisible"
      :data="permission"
      @success="handleActionSuccess"
    />
  </div>
</template>

<script>
import ActionBar from './components/ActionBar'
import Diglog from './components/Diglog'
import Table from './components/Table'
import PermissionService from '../../../service/permission'
import { loadingType } from '../../../common/js/constant'

export default {
  data() {
    return {
      title: '',
      keyword: '',
      permission: {},
      permissionList: [],
      dialogVisible: false
    }
  },
  methods: {
    // 获取权限列表
    getPermissionList() {
      const result = PermissionService.getPermissionsByKeyword(
        this.keyword
      ).then(res => {
        this.permissionList = res.data.list
      })
      this.loadingAspect(result, loadingType.TABLE)
    },
    // 处理input改变事件
    handleInputChange(value) {
      this.keyword = value
    },
    // 处理添加按钮点击事件
    handleInsertClick() {
      this.title = '添加权限'
      this.permission = null
      this.dialogVisible = true
    },
    // 处理编辑按钮点击事件
    handleEditClick() {
      if (this.selection.length === 0 || this.selection.length > 1) {
        this.$confirm('请选择一条记录', '提示', {
          showCancelButton: false,
          confirmButtonText: '确定',
          type: 'warning'
        })
      } else {
        this.title = '编辑权限'
        // 深拷贝permission防止引用传递
        this.permission = JSON.parse(JSON.stringify(this.selection[0]))
        this.dialogVisible = true
      }
    },
    // 处理删除按钮点击事件
    handleDeleteClick() {
      if (this.selection.length < 1) {
        this.$confirm('请至少选择一条记录', '提示', {
          showCancelButton: false,
          confirmButtonText: '确定',
          type: 'warning'
        })
      } else {
        this.$confirm('您确定删除该权限？', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          let permissionIds = this.recursionPermissionIds(this.selection)
          PermissionService.deletePermissions(permissionIds).then(res => {
            // 提示
            this.$message.success(res.message)
            // 刷新Table
            this.getPermissionList()
          })
        })
      }
    },
    // 处理操作成功事件
    handleActionSuccess(pageNum) {
      if (pageNum !== null) {
        this.pageNum = pageNum
      }
      this.getPermissionList()
    },
    // 处理pageSize改变事件
    handlePageSizeChange(value) {
      this.pageSize = value
      this.getPermissionList()
    },
    // 处理pageNum改变事件
    handlePageNumChange(value) {
      this.pageNum = value
      this.getPermissionList()
    },
    // 递归PermissionIds
    recursionPermissionIds(arr) {
      let permissionIds = []
      arr.forEach(item => {
        permissionIds.push(item.permissionId)

        if (item.children) {
          permissionIds.push(...this.recursionPermissionIds(item.children))
        }
      })
      return permissionIds
    }
  },
  mounted() {
    this.getPermissionList()
  },
  components: {
    ActionBar,
    Table,
    Diglog
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  height 100%
  padding 20px
  box-sizing border-box
  .pagination
    margin-top 20px
    text-align right
</style>
